<!DOCTYPE html>
<html>
	<head>
	</head>
	<body class="width: 100%;">
		<div id="adicionarTime" style="width: 350px;">
			<p id='mensagens' style="display: none;"></p>
			
			<div class="areaCampos" id="addTime" style="width: 350px;">
				<h2>Cadastre seu Time</h2>
				<p>	
					<label>Nome:</label>
					<input id='nomeTime' data-bind='value: nomeTime'/>
				</p>
				<button data-bind='click: abrirModalEditarTimes'>Editar Meus Times</button>
				<button data-bind='click: cadastrarTime'>Cadastar</button>
			</div>
		</div>
		<div class="areaCampos" id='modalEditarTime'>
			<label>Time:</label>
			<select data-bind="options: times, optionsText: 'nome', value: timeSelecionado"></select>
			<label>Nome:</label>
			<input data-bind="value: timeSelecionado() ? timeSelecionado().nome : 'unknown'"></input>
			<br/>
			<br/>
			<button data-bind='click: excluirTime'>Excluir</button>
			<button data-bind='click: atualizarTime'>Atualizar</button>
			<button data-bind='click: fecharModalEditarTimes'>Fechar</button>
		</div>
		<div id="adicionarPartida" style="width: 350px;">
			<p id='mensagens' style="display: none;"></p>
		<form id="teste" name="teste">
			<div class="areaCampos" id='addPartida' style="width: 350px;">
				<h2>Cadastre sua Partida</h2>
				<p>
					<label>Local:</label>
					<input id='localPartida' data-bind="value: localPartida" />
				</p>
				<p>
					<label>Data:</label>
					<input id='dataPartida' data-bind="value: dataPartida" />
				</p>
				<p>
					<label>Hora:</label>
					<input id='horaPartida' data-bind="value: horaPartida"  OnKeyUp="Mascara_Hora(this.value)" size="5" maxlength="5" />
				</p>
				<p>
					<label>Time Rival:</label>
					<select data-bind="options: timesRivais1, optionsText: 'nome', value: timeRivalSelecionado"></select>
				</p>
				</form>
				</br>
				</br>
				
				<button data-bind='click: abrirModalEditarPartidas'>Editar</button>
				<button data-bind='click: cadastrarPartida'>Marcar</button>
			</div>
	</div>
	<div class="areaCampos" id='modalEditarPartida'>
			<label>partida:</label>
			<select data-bind="options: partidas, optionsText: 'local', value: partidaSelecionada"></select>
			<label>local:</label>
			<input data-bind="value: partidaSelecionada() ? partidaSelecionada().local : 'unknown'"></input>
			<label>data:</label>
			<input data-bind="value: partidaSelecionada() ? partidaSelecionada().dataPartida : 'unknown'"></input>
			<label>Time Rival:</label>
			<input data-bind="value: partidaSelecionada() ? partidaSelecionada().timeRivalPartida : 'unknown'"></input>
			
			</br></br>
			
			<button data-bind='click: excluirPartida'>Excluir</button>
			<button data-bind='click: atualizarPartida'>Atualizar</button>
			<button data-bind='click: fecharModalEditarPartidas'>Fechar</button>
		</div>
		
		<div id="meustimes" style="float: right; width: 500px; display:none; float: left;">
			<p id='mensagens' style="display: none;"></p>
			<div class="areaCampos" style="width: 400px;">
				<table>
				    <thead>
				        <tr>
				        	<th>Time</th>
				        	<th>Jogador</th>
				        </tr>
				    </thead>
				    <tbody data-bind="foreach: meusTimes">
				        <tr>
				            <td data-bind="text: nomeTime"></td>
				            <td data-bind="text: nomePlayer"></td>
				        </tr>
				    </tbody>
				</table>
			</div>
		</div>
	</body>
	<script>
		$(document).ready(function() {
			$( "#dataPartida" ).datepicker({ dateFormat: 'yy/mm/dd' });
			$( '#modalEditarTime' ).dialog({ autoOpen: false, dialogClass: 'no-close', modal: true, closeOnEscape: true, title: 'Editar meus Times', height: 230, width: 500 });
			
			var meusTimes = new MeusTimes();
			var user = $.parseJSON(localStorage.user);
			var requestMeusTimes = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/time/meusTimes', data: {idPlayer: user.id}});
			
			requestMeusTimes.done( function (callback) {
				if (callback) {
					var jsontimes = $.parseJSON(callback);
					if(jsontimes.length > 0) {
						$("#meustimes").toggle();
					}
					
					for(var i = 0; i < jsontimes.length; i++) {
						meusTimes.self.meusTimes.push(jsontimes[i]);
					}
				} 	
			});
			
			function carregarMeusTimes() {
				var requestMeusTimes = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/time/meusTimes', data: {idPlayer: user.id}});
				
				requestMeusTimes.done( function (callback) {
					if (callback) {
						var jsontimes = $.parseJSON(callback);
						
						if(jsontimes.length > 0) {
							$("#meustimes").toggle();
						} else {
							$("#meustimes").toggle();
						}
						
						for(var i = 0; i < jsontimes.length; i++) {
							meusTimes.self.meusTimes.push(jsontimes[i]);
						}
					} 	
				});
			}
			
			function MeusTimes() {
				this.self = this;
				
				this.meusTimes = ko.observableArray();
			}
			
			ko.applyBindings(meusTimes, document.getElementById("meustimes"));
			
			function ModalEditarTimes() {
				this.self = this;
	
				this.times = ko.observableArray();
				this.timeSelecionado = ko.observable();
	
	    		self.fecharModalEditarTimes = function() {
	    			$( '#modalEditarTime' ).dialog('close');
	        	};
	
	        	self.atualizarTime = function() {
	        		var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/time/atualizar/nome', data: {id: modalEditarTimes.timeSelecionado().id, nome: modalEditarTimes.timeSelecionado().nome} });
	        		
	        		request.done( function (callback) {
	        			$('#mensagens').fadeIn(2000);
	        			$('#mensagens').text('Time atualizado com sucesso.');
	        			$('#mensagens').fadeOut(3000);
	        		});
	            };
	
	            self.excluirTime = function() {
	            	var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/time/remover', data: {id: modalEditarTimes.timeSelecionado().id} });
	        		
	        		request.done( function (callback) {
	        			modalEditarTimes.times.pop(modalEditarTimes.timeSelecionado());
	            		
	        			$('#mensagens').fadeIn(2000);
	        			$('#mensagens').text('Seu time foi excluido.');
	        			$('#mensagens').fadeOut(3000);
	        		});
	            };
	        }
	
	    	var modalEditarTimes = new ModalEditarTimes();
			
	    	ko.applyBindings(modalEditarTimes, document.getElementById("modalEditarTime"));
			
			var TimeEditavel = function(id, nome, capitao) {
				this.id = ko.observable(id);
				this.nome = ko.observable(nome);
				this.capitao = ko.observable(capitao);
			};
			
			function CadastroTime() {
				this.self = this;
				
				var count = 0;
			
				self.nomeTime = ko.observable();
				
				self.cadastrarTime = function() {
					count = count +1;
					if (count <= 1) {
					var user = $.parseJSON(localStorage.user);

					var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/time/inserir', data: {nome: self.nomeTime(), capitao: user.apelido}});
	        		
	        		request.done( function (callback) {
	            		if(callback == 'falha') {
	            			$('#mensagens').fadeIn(2000);
	            			$('#mensagens').text('Ja existe um time com este nome. Por favor escolher outro nome para o seu time.');
	            			$('#mensagens').fadeOut(3000);
	                	} else {
	                		document.location.reload(true);
	                		$(document).ready(function() {
		                		$('#mensagens').fadeIn(2000);
		            			$('#mensagens').text('Time cadastrado com sucesso!');
		            			$('#mensagens').fadeOut(3000);
	                		});
	                    }
	                    
	        			self.nomeTime('');
	        		});
					} else {
						count = 0;
					}
		    	};
	
		    	self.abrirModalEditarTimes = function() {
		    		var user = $.parseJSON(localStorage.user);
		    		count = count +1;
		    		if (count <= 1) {
		    		var request = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/cadastro/time/buscar/todos/capitao', data: {capitao: user.apelido} });
			    	
			    	request.done( function (callback) {
		    			var jsontimes = $.parseJSON(callback);
	
		    			if(jsontimes.length > 0) {
			    			modalEditarTimes.times.removeAll();
			    			
				    		for(var i = 0; i < jsontimes.length; i++) {
				    			modalEditarTimes.times.push(new TimeEditavel(jsontimes[i].id, jsontimes[i].nome, jsontimes[i].capitao));
				    		}
				    		
				    		$( '#modalEditarTime' ).dialog('open');
		    			} else {
		    				$('#mensagens').fadeIn(2000);
		        			$('#mensagens').text('Voce nao possui nenhum time cadastrado.');
		        			$('#mensagens').fadeOut(3000);
			    		}
		    		});
		    		} else {
		    			count = 0;
		    		}
			    };
	    	}
	    	
	    	ko.applyBindings(new CadastroTime(), document.getElementById("adicionarTime"));

			$( '#modalEditarPartida' ).dialog({ autoOpen: false, dialogClass: 'no-close', modal: true, closeOnEscape: true, title: 'Editar minhas Partidas', height: 300, width: 500 });
		
	    	function ModalEditarPartidas() {
				this.self = this;
	
				this.partidas = ko.observableArray();
				this.partidaSelecionada = ko.observable();
				
	
	    		self.fecharModalEditarPartidas = function() {
	    			$( '#modalEditarPartida' ).dialog('close');
	        	};
	
	        	self.atualizarPartida = function() {
	        		var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/partida/atualizar/local', data: {id: modalEditarPartidas.partidaSelecionada().id, local: modalEditarPartidas.partidaSelecionada().local, dataPlay: dataPartida().dataPlay, timeRival: timeRivalPartida().timeRival} });
	        		
	        		request.done( function (callback) {
	        			$('#mensagens').fadeIn(900);
	        			$('#mensagens').text('Partida atualizada com sucesso.');
	        			$('#mensagens').fadeOut(3000);
	        		});
	            };
	
	            self.excluirPartida = function() {
	            	var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/partida/remover', data: {id: modalEditarPartidas.partidaSelecionada().id} });
	        		
	        		request.done( function (callback) {
	        			modalEditarPartidas.partidas.pop(modalEditarPartidas.partidaSelecionada());
	            		
	        			$('#mensagens').fadeIn(900);
	        			$('#mensagens').text('Sua Partida foi excluida.');
	        			$('#mensagens').fadeOut(3000);
	
	        			modalEditarPartidas.partidaSelecionada().local('');
	        			modalEditarPartidas.partidaSelecionada().dataPartida('');
	        			modalEditarPartidas.partidaSelecionada().timeRivalPartida('');
	        		});
	            };
	        }
	
	    	var modalEditarPartidas = new ModalEditarPartidas();
			
	    	ko.applyBindings(modalEditarPartidas, document.getElementById("modalEditarPartida"));
		
			var PartidaEditavel = function(id, local, dataPlay, timeRival) {
				this.id = ko.observable(id);
				this.local = ko.observable(local);
				this.dataPartida = ko.observable(dataPlay);
				this.timeRivalPartida = ko.observable(timeRival);
			};
	    	
	    	function CadastroPartida() {
	
				this.self = this;
			
				self.localPartida = ko.observable('');
				self.dataPartida = ko.observable('');
				self.horaPartida = ko.observable('');
				self.timeRivalPartida = ko.observable('');
				self.timeRivalSelecionado = ko.observable();
				self.timesRivais1 = ko.observableArray();
				
				self.timesRivais = ko.computed(function() {
					var request = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/cadastro/time/buscar/todos' });
			    	
			    	request.done( function (callback) {
		    			var jsontimes = $.parseJSON(callback);
		    			if(jsontimes.length > 0) {
			    			for(var i = 0; i < jsontimes.length; i++) {
		    					self.timesRivais1.push(new TimeEditavel(jsontimes[i].id, jsontimes[i].nome, jsontimes[i].capitao));
				    		}
		    			}
			    	});
				});
				
				self.cadastrarPartida = function() {
	        		var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/partida/inserir', data: {local: self.localPartida(), dataPlay: $( "#dataPartida" ).val(), hora: self.horaPartida(), timeRival: self.timeRivalSelecionado().nome}});
	        		request.done( function (callback) {
	        			$('#mensagens').fadeIn(1000);
	        			$('#mensagens').text('Partida cadastrada com sucesso.');
	        			$('#mensagens').fadeOut(2000);
	        		});
	        		self.localPartida('');
	        		$('#dataPartida').datepicker('setDate', null);
	        		self.horaPartida('');
	        		self.timeRivalPartida('');
		    	};
	    	
	    		self.abrirModalEditarPartidas = function() {
		    		var request = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/cadastro/partida/buscar/todos' });
			    	
			    	request.done( function (callback) {
		    			var jsontimes = $.parseJSON(callback);
		    			if(jsontimes.length > 0) {
			    			modalEditarPartidas.partidas.removeAll();
			    			
				    		for(var i = 0; i < jsontimes.length; i++) {
				    			modalEditarPartidas.partidas.push(new PartidaEditavel(jsontimes[i].id, jsontimes[i].local, jsontimes[i].dataPlay, jsontimes[i].timeRival));
					    	}
				    		
				    		$( '#modalEditarPartida' ).dialog('open');
		    			} else {
		    				$('#mensagens').fadeIn(2000);
		        			$('#mensagens').text('Voce nao possui nenhuma partida cadastrada.');
		        			$('#mensagens').fadeOut(3000);
			    		}
		    		});
			    };
			}
	    	
	    	ko.applyBindings(new CadastroPartida(), document.getElementById("addpartida"));
		});


		function Mascara_Hora(horaPartida){ 
			var hora01 = ''; 
			hora01 = hora01 + horaPartida; 
			if (hora01.length == 2){ 
			hora01 = hora01 + ':'; 
			document.teste.horaPartida.value = hora01; 
			} 
			if (hora01.length == 5){ 
			Verifica_Hora(); 
			} 
			} 
			           
			function Verifica_Hora(){ 
			hrs = (document.teste.horaPartida.value.substring(0,2)); 
			min = (document.teste.horaPartida.value.substring(3,5)); 
			               
			estado = ""; 
			if ((hrs < 00 ) || (hrs > 23) || ( min < 00) ||( min > 59)){ 
			estado = "errada"; 
			} 
			               
			if (document.teste.horaPartida.value == "") { 
			estado = "errada"; 
			} 

			if (estado == "errada") { 
			alert("Hora invalida!"); 
			document.teste.horaPartida.focus(); 
			} 
			} 
	</script>
</html>